<template>
  <custom-navbar title="我的简历" :auto-back="true" left-icon-color="#303133" />
  <Tabbar :tab-list="tabList" @tab-change="tabChange" />
  <up-gap height="30rpx" />
  <view v-show="activeTab === 0">
    <view v-for="item,index in resumeList" :key="index" class="mb-32rpx bg-#fff px-54rpx">
      <view class="h-92rpx flex items-center b-b-1rpx b-b-#f7f7f8 b-b-solid">
        <view v-if="item.remarks.length == 0"
          class="h-[54rpx] flex items-center justify-center rounded-[28rpx] bg-#f7f7f8 pl-24rpx pr-30rpx">
          <up-icon :name="Img1" width="34rpx" height="34rpx" />
          <text class="ml-6rpx color-#7b7b7b font-700">
            重命名
          </text>
        </view>
        <view v-else class="h-92rpx flex items-center b-b-1rpx b-b-#f7f7f8 b-b-solid">
          <view class="h-[54rpx] flex items-center justify-center rounded-[28rpx] bg-#e8edfe pl-24rpx pr-30rpx">
            <up-icon :name="Img1" width="34rpx" height="34rpx" />
            <text class="ml-6rpx color-#1F50F2 font-700">
              {{item.remarks}}
            </text>
          </view>
        </view>
      </view>
      <view class="pb-36rpx pt-18rpx">
        <up-gap height="20rpx" />
        <view class="flex">
          <view class="mr-16rpx h-100rpx w-100rpx shrink-0">
            <up-image width="100rpx" height="100rpx" shape="circle" :src="item.avatar" />
          </view>
          <view class="flex-auto">
            <view class="mb-16rpx flex items-center justify-between">
              <view class="text-32rpx color-#1d2129">
                {{item.name}}
              </view>
              <view class="h-[46rpx] flex items-center rounded-[24rpx] bg-#f7f7f8 pl-14rpx pr-18rpx color-#1f50f2">
                <view class="relative">
                  <up-icon :name="Img2" width="32rpx" height="34rpx" />
                  <view
                    class="border- absolute right-4rpx top-4rpx h-12rpx w-12rpx border-2rpx border-#fff rounded-full border-solid bg-#ff0000" />
                </view>
                <text @tap="routerToDetail(item.resume_id)">立即完善</text>
              </view>
            </view>
            <view class="flex text-26rpx color-#6e6d72 leading-100%">
              <text>{{item.province}}·{{item.city}}</text>
              <up-line length="30rpx" color="#6e6d72" direction="col" margin="0 12rpx" />
              <text>{{item.gender}}</text>
              <up-line length="30rpx" color="#6e6d72" direction="col" margin="0 12rpx" />
              <text>{{item.qualification?item.qualification:''}}</text>
              <up-line length="30rpx" color="#6e6d72" direction="col" margin="0 12rpx" />
              <text>{{item.nature}}</text>
            </view>
          </view>
        </view>
        <up-gap height="20rpx" />
        <view class="flex flex-wrap gap-10rpx">
          <view class="h-42rpx rounded-[4rpx] bg-#fcf8e9 px-8rpx text-[24rpx] text-[#f57100] leading-[42rpx]"
            v-for="value in item.highlights">
            {{value}}
          </view>
        </view>
        <up-gap height="20rpx" />
        <view class="flex flex-wrap items-center text-26rpx color-#6e6d72 leading-36rpx">
          <text>{{item.school_name}}</text>
          <up-line length="30rpx" color="#6e6d72" direction="col" margin="0 12rpx" />
          <text>{{item.majars_name}}</text>
          <up-line length="30rpx" color="#6e6d72" direction="col" margin="0 12rpx" />
          <text>{{item.status_overseas_study}}</text>
        </view>
        <up-gap height="20rpx" />
        <view class="flex items-center justify-between">
          <view class="flex flex-wrap items-center text-26rpx color-#4e5968 leading-36rpx">
            <text>{{item.position_type}}·{{item.position}}</text>
            <up-line length="30rpx" color="#6e6d72" direction="col" margin="0 12rpx" />
            <text v-if="item.salary_min && item.salary_max">{{item.salary_min}}k-{{item.salary_max}}k</text>
          </view>
          <view>
            <!--            <up-copy content="健康体检·临床试验 10k-15k">-->
            <!--              <view class="flex items-center">-->
            <!--                <up-icon name="file-text-fill" size="28rpx" />-->
            <!--                <text class="mt-[-3rpx] color-#999999 font-700">-->
            <!--                  复制-->
            <!--                </text>-->
            <!--              </view>-->
            <!--            </up-copy>-->
          </view>
        </view>
      </view>
    </view>
  </view>
  <view v-show="activeTab === 1">
    <view
      class="mx-auto h-[204rpx] w-[702rpx] flex items-center justify-between rounded-[30rpx] bg-#fff px-24rpx shadow-[0rpx_6rpx_16rpx_0rpx_rgba(191,191,191,0.26)]"
      style="margin-bottom: 24rpx;" v-for="(item,index) in annexListData" :key="index" @click="openFile(item)">
      <view class="flex items-center">
        <up-icon :name="Img3" width="96rpx" height="96rpx" />
        <text class="line-clamp-3 ml-10rpx max-w-300rpx text-30rpx color-#1d2129 font-500">
          {{item.name}}
        </text>
      </view>
      <view
        class="h-[54rpx] w-[132rpx] flex items-center justify-center border-[1rpx] border-[#999999] rounded-[8rpx] border-solid color-#999999"
        @click.stop="delAnnex(item)">
        删除
      </view>
    </view>
  </view>
  <view>
    <view class="h-190rpx pb-safe" />
    <view class="fixed bottom-0 left-0 w-100% bg-#fff px-30rpx pt-24rpx pb-safe" v-if="activeTab==0">
      <up-button :custom-style="{ background: '#1f50f2', color: '#fff', height: '82rpx', fontSize: '30rpx' }"
        shape="circle" text="新增在线简历" @click="routerTo" />
    </view>
    <view class="fixed bottom-0 left-0 w-100% bg-#fff px-30rpx pt-24rpx pb-safe" v-if="activeTab==1">
      <up-button :custom-style="{ background: '#1f50f2', color: '#fff', height: '82rpx', fontSize: '30rpx' }"
        shape="circle" text="上传简历" @click="uploadFile" />
    </view>
  </view>
</template>

<script setup lang="ts">
  import Tabbar from '@/pages/components/tabbar/index.vue';
  // import Img1 from '@/static/images/userInfo/img-1.png';
  // import Img2 from '@/static/images/userInfo/img-2.png';
  // import Img3 from '@/static/images/userInfo/img-3.png';
  import { userResumeList, addAnnexResume, annexList, delAnnexResume, userEduList } from '@/api/user';
  const Img1 = 'https://yiliao.test03.qcw800.com/static/images/userInfo/img-1.png';
  const Img2 = 'https://yiliao.test03.qcw800.com/static/images/userInfo/img-2.png';
  const Img3 = 'https://yiliao.test03.qcw800.com/static/images/userInfo/img-3.png';
  const tabList = reactive([
    { name: '在线简历', activeLineWidth: '180' },
    { name: '附件简历', activeLineWidth: '108' },
  ]);
  const activeTab = ref(0);
  const annexListData = ref([])
  const tabChange = (e : { index : number }) => {
    activeTab.value = e.index;
    if (e.index == 0) {
      getResumeList();
    } else {
      getAnnexList()
    }
  };

  const routerTo = () => {
    if (isAddResume.value) {
      uni.showToast({
        icon: 'none',
        title: '请先填写教育经历'
      })
      return
    }
    uni.navigateTo({
      url: '/pages/userinfo/resume-create',
    });
  };
  const uploadFile = () => {

    wx.chooseMessageFile({
      count: 1,
      type: 'file',
      extension: ['.pdf'],
      success(res) {
        console.log("chooseMessageFileRes:", JSON.stringify(res));
        console.log("chooseMessageFileRes:", res);

        console.log('res.tempFiles[i].path', res.tempFiles[0].path);
        uni.uploadFile({
          url: 'https://yiliao.test03.qcw800.com/api/common/upload',
          name: 'file',
          filePath: res.tempFiles[0].path,
          formData: {
            name: res.tempFiles[0].name
          },
          success: function (res) {
            console.log('uploadFile1111', res);
            let imgRes = JSON.parse(res.data).data
            console.log('uploadFile1111', imgRes);
            // arr.push(imgRes)
            // return
            addAnnexResume({ name: imgRes.name, url: imgRes.url, ext: imgRes.ext }).then(respones => {
              console.log('新增：：：返回----', respones);
              if (respones.id) {
                uni.showToast({
                  icon: 'none',
                  title: '简历上传成功'
                })
                getAnnexList()
              } else {
                uni.showToast({
                  icon: 'none',
                  title: '简历上传失败'
                })
              }
            })
          }
        });


      }
    })
  };
  const getAnnexList = async () => {
    let res = await annexList()
    // console.log('微信列表：：：：-----', res);
    annexListData.value = res
  };
  const delAnnex = async (item) => {
    let res = await delAnnexResume({ id: item.id })
    console.log('删除列表：：：：-----', res);
    getAnnexList()
  };
  const openFile = async (item) => {
    uni.showLoading({
      mask: true,
      title: '简历打开中'
    })
    uni.downloadFile({ //将文档下载到本地
      url: item.url, //pdf链接
      success(res) {
        console.log('res', res);
        uni.hideLoading()
        uni.openDocument({ //打开文档
          filePath: res.tempFilePath, //本地文档路径
          showMenu: true,
          fileType: item.ext,
          success: function (successres) {
            console.log('successres', successres);
          },
          fail: function (failres) {
            console.log('failres', failres);
          },
        })
      },
      fail(err) {
        console.log('err', err);
      }
    })
  };
  const routerToDetail = (resume_id : number) => {
    uni.navigateTo({
      url: '/pages/userinfo/resume-create?resume_id=' + resume_id,
    });
  };

  const resumeList : any = ref();

  async function getResumeList() {
    let res = []
    let result = await userResumeList();
    console.log('我的-简历列表list:::', result);
    //vue3传递result的值到子组件JobList中的属性jobList中
    const user_info = result.user
    const education = result.educationLast ? result.educationLast : {}
    for (let i = 0; i < result.list.length; i++) {
      const r = result.list[i]
      let rr = {
        resume_id: r.id,
        avatar: user_info.avatar,
        name: user_info.name,
        gender: user_info.gender,
        salary_min: r.intention ? r.intention.salary_min : '',
        salary_max: r.intention ? r.intention.salary_max : '',
        province: r.intention ? r.intention.province.name : '',
        city: r.intention ? r.intention.city.name : '',
        position_type: r.intention ? r.intention.position_type : '',
        position: r.intention ? r.intention.position.content : '',
        qualification: education ? education.qualification : '',
        nature: r.intention ? r.intention.nature : '',
        highlights: r.highlights,
        school_name: education.school_name,
        majors_name: education.majors_name,
        status_overseas_study: '',
        remarks: r.remarks,
      }
      if (r.status_overseas_study == 1) {
        rr.status_overseas_study = '留学'
      } else {
        rr.status_overseas_study = '未留学'
      }
      res.push(rr)
    }
    resumeList.value = res;
  }
  const isAddResume = ref(true)
  async function getEduList() {
    let result = await userEduList();
    console.log('更多-教育经历列表 res list:::', result);
    if (result.length <= 0) {
      isAddResume.value = true
    } else {
      isAddResume.value = false
    }
  }


  onLoad((query : any) => {
    //query.status
    getResumeList();
    getEduList();
  });
</script>
